<template>
  <div>
    <!--              点赞-->
    <el-button class="item-bottom" @click="like()"
               @mouseenter.native="$refs.likeText.style.color = '#606266'" plain
               style="padding: 10px;border: none">
      <i ref="aiXinArticle" class="iconfont icon-aixin item-bottom-icon"
         :style="{'color':isLikeTem?'red':'#606266'}"></i>
      <span ref="likeText">点赞 {{ starsTem }}</span>
    </el-button>
    <!--              评论-->
    <el-button plain class="item-bottom">
      <i class="el-icon-chat-dot-round  item-bottom-icon"></i>
      <span>{{ commentNumTem }} 条评论</span>
    </el-button>
    <!--              收藏-->
    <!--    @mouseenter.native消除饿了吗默认行为-->
    <el-button @click="collect()" @mouseenter.native="$refs.text.style.color = '#606266'" plain class="item-bottom"
               to="/article">
      <i ref="collection" class="el-icon-star-on"
         :style="{'color':isCollectedTem?'rgb(64, 158, 255)':'rgb(96 98 102)'}"></i>
      <span ref="text">收藏</span>
    </el-button>
    <!--              分享-->
    <el-button plain class="item-bottom" to="/article">
      <i class="el-icon-share item-bottom-icon"></i>
      <span>分享</span>
    </el-button>
    <!--    热度-->
    <span style="float:right;color: #409EFF">{{ view }}浏览</span>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ArticleBottom',
  methods: {
    like: function () {
      if (!this.uid) {
        // 未登录则弹登录页面
        this.$router.push('/login')
      } else {
        if (this.isLikeTem) {
          // 取消点赞
          this.axios.delete('/user/doUnLike', {
            params: {
              articleId: this.articleId,
              uid: this.uid + ''
            }
          }).then(function (res) {
            console.log(res.data)
          })
          this.$refs.aiXinArticle.style.color = '#606266'
          this.starsTem--
        } else {
          // 点赞
          this.axios.put('/user/doLike', {}, {
            params: {articleId: this.articleId, uid: this.uid + ''}
          }).then(function (res) {
            console.log(res.data)
          })
          this.$refs.aiXinArticle.style.color = 'red'
          this.starsTem++
        }
        this.isLikeTem = !this.isLikeTem
      }
    },
    collect: function () {
      if (this.uid) {
        // 收藏
        // 已登录
        if (!this.isCollectedTem) {
          // 收藏
          axios.put('/user/doCollect', {}, {
            params: {
              articleId: this.articleId,
              uid: this.uid + ''
            }
          }).then(function (res) {
            console.log(res.data)
          })
          console.log(this.$refs.collection.style.color)
          this.$refs.collection.style.color = 'rgb(64, 158, 255)'
          console.log(this.$refs.collection.style.color)
        } else {
          // 取消收藏
          axios.delete('/user/doUnCollect', {
            params: {articleId: this.articleId, uid: this.uid + ''}
          }).then(function (res) {
            console.log(res.data)
          })
          this.$refs.collection.style.color = 'rgb(96 98 102)'
        }
        this.isCollectedTem = !this.isCollectedTem
      } else {
        // 未登录，跳转至登录页面
        this.$router.push('/login')
      }
    },
    commentNumPlus: function () {
      this.commentNumTem++
    }
  },
  props: {
    articleId: {default: 1},
    stars: {default: 0},
    commentNum: {default: 0},
    view: {default: 0},
    isLike: {default: false},
    isCollect: {default: false},
    uid: {default: ''}
  },
  data () {
    return {
      starsTem: '',
      commentNumTem: '',
      isLikeTem: '',
      isCollectedTem: ''
    }
  },
  mounted () {
    this.stars ? this.starsTem = this.stars : this.starsTem = 0
    this.commentNumTem = this.commentNum
    this.isLikeTem = this.isLike
    this.isCollectedTem = this.isCollect
  }
}
</script>

<style scoped>
@import '//at.alicdn.com/t/font_3359753_jd31ko49zm.css';

.item-bottom {
  font-size: 17px;
  border: none;
}

.item-bottom-icon {
  font-size: 20px;
}

.el-icon-star-on {
  font-size: 22px;
}
</style>
